<script setup>
import { ref } from 'vue';
import { ElInput } from 'element-plus'
import MessageBox from '@/utils/MessageBox';



const emit = defineEmits(['submit', 'click_register'])

const formData = ref({
    username: '',
    password: ''
})


function submit(e){
    e.preventDefault();
    if(!formData.value.username){
        MessageBox.warning("请输入用户名")
        return
    }
    if(!formData.value.password){
        MessageBox.warning("请输入密码")
        return
    }
    
    
    emit('submit', formData.value)
    

}

const click_register = ()=>{
    emit('click_register')
}

</script>

<template>
    <form class="login__form" @submit="submit($event)">

        <div class="form__row">
            <div class="form__plot"><div class="form__label">用户名</div></div>
            <div class="form__control"><el-input type="text" v-model.trim="formData.username" placeholder="请输入用户名或邮箱" /></div>
        </div>
        <div class="form__row">
            <div class="form__plot"><div class="form__label">密码</div></div>
            <div class="form__control"><el-input type="password" v-model.trim="formData.password" placeholder="请输入密码"  show-password/></div>
        </div>
        <div class="form__row register">
            <div><span @click="click_register">没有账号?去注册</span></div>
        </div>
        <button type="submit" class="button__submit">登录</button>
    </form>
    
</template>

<style scoped lang="scss">


.form__row{
    margin-top: 20px;
    .form__plot{
        display: flex;
        justify-content: space-between;
        .form__label{
            text-align: left;
            flex: 1;
        }
    }
    
}

.button__submit {
        height: 50px;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 50px;
        border: none;
        font-size: 14px;
        color: #fff;
        background-color: var(--wchime-color-highlight);
        opacity: 0.8;
        border-radius: 6px;
    }
.button__submit:focus,
.button__submit:hover {
    opacity: 1;
    outline: none;
}

:deep(.el-input__wrapper) {
    padding: 1px 17px;
    font-size: 12px;
    box-shadow: 0 0 0 1px #e3e4e8 inset;
    border-radius: 5px;
}
:deep(.el-input__wrapper.is-focus),
:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px var(--wchime-color-highlight) inset;
}
:deep(.el-input__inner) {
    height: 50px;
    line-height: 50px;
    color: #282828;
}

.register{
    margin-top: 10px;
    width: 100%;
    text-align: left;
    user-select: none;
    
    span{
        cursor: pointer;
    }
}
.register span:hover{
    color: var(--wchime-color-hover-highlight);
}


</style>